<template>
  <div>
    <!--面包屑导航-->
    <div class="breadcrumb">
      <div class="container">
        <h2>
          <router-link to="/">首页</router-link>&gt;<router-link to="news"
            >公司动态</router-link
          >
        </h2>
      </div>
    </div>
    <!--页面主体-->
    <div class="main container" v-if="data">
      <div class="news">
        <ul>
          <li v-for="(item, index) in data.data" :key="index">
            <span>{{ item.pubTime | date }}</span
            ><router-link :to="`/news_details/${item.nid}`">{{ item.title }}</router-link>
          </li>
        </ul>
      </div>
      <!-- 分页导航-->
      <div class="pages">
        <a @click="getData(data.pageNum-1)" :class="{default:data.pageNum == 1}">上一页</a>
        <!-- 遍历数字pageCount -->
        <!-- 动态样式class :class="{名：true/false}" -->
        <a
          @click="getData(item)"
          v-for="(item, index) in data.pageCount"
          :key="index"
          :class="{cur:item == data.pageNum}"
          >{{ item }}</a
        >
        <!-- <a href="">2</a> -->
        <!--<a href="">3</a>-->
        <!--<a href="">4</a>-->
        <!--<a href="">5</a>-->
        <a @click="getData(data.pageNum+1)" :class="{default:data.pageNum == data.pageCount}">下一页</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    this.getData(1);
  },
  methods: {
    // 形参名pno：page number的缩写
    getData(pno) {
      // pno 超出限定，则终止后续代码
      if(this.data && pno < 1) return
      if(this.data && pno>this.data.pageCount) return
      // 需要传递页数参数
      let url = "news_select.php?pageNum=" + pno;
      this.axios.get(url).then((res) => {
        console.log(res);
        this.data = res.data;
      });
    },
  },
  filters: {
    date(value) {
      let date = new Date(value * 1);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}-${month}-${day}`;
    },
  },
};
</script>

<style lang="scss" scoped></style>
